{% extends "base.html" %}

{% block content %}
<div class="main-content">
    <!-- 搜索横幅部分 -->
    <section class="banner bg-gray-100 rounded-lg p-8 mb-8 shadow-md relative">
        <div class="container mx-auto">
            <div class="search-box flex justify-center">
                <form action="{% url 'novel_search' %}" method="get" class="flex w-full max-w-md">
                    <input type="text" name="q" placeholder="搜索小说名或作者..." class="flex-1 border border-gray-300 rounded-l px-4 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600 focus:outline-none focus:ring-blue-500">搜索</button>
                </form>
            </div>
        </div>
    </section>

    <!-- 推荐小说部分 -->
    <section class="recommended mb-8">
        <div class="container mx-auto">
            <h2 class="section-title text-2xl font-bold text-gray-800 mb-4 text-center">推荐小说</h2>
            <div class="novel-grid grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                {% for novel in recommended_novels %}
                <div class="novel-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow relative">
                    <div class="novel-cover relative h-48 overflow-hidden">
                        {% if novel.cover %}
                        <a href="{% url 'novel_detail' novel.id %}" class="novel-cover-link">
                            <img src="{{ novel.cover.url }}" alt="{{ novel.title }}" class="w-full h-full object-cover">
                        </a>
                        <div class="overlay absolute inset-0 bg-black opacity-0 hover:opacity-50 transition-opacity"></div>
                        <div class="icon-container absolute top-0 right-0 p-2">
                            <i class="fa-solid fa-eye text-white opacity-0 hover:opacity-100 transition-opacity"></i>
                        </div>
                        {% else %}
                        <a href="{% url 'novel_detail' novel.id %}" class="novel-cover-link">
                            <div class="no-cover absolute inset-0 flex items-center justify-center bg-gray-100 text-gray-500">暂无封面</div>
                        </a>
                        <div class="overlay absolute inset-0 bg-black opacity-0 hover:opacity-50 transition-opacity"></div>
                        <div class="icon-container absolute top-0 right-0 p-2">
                            <i class="fa-solid fa-eye text-white opacity-0 hover:opacity-100 transition-opacity"></i>
                        </div>
                        {% endif %}
                    </div>
                    <div class="novel-info p-4">
                        <h3 class="novel-title text-lg font-bold mb-2 text-gray-800">
                            <a href="{% url 'novel_detail' novel.id %}" class="novel-title-link">
                                {{ novel.title }}
                            </a>
                        </h3>
                        <p class="novel-author text-sm text-gray-600 mb-1">作者：{{ novel.author.username }}</p>
                        <p class="novel-category text-sm text-gray-600 mb-2">分类：{{ novel.category.name }}</p>
                        <p class="novel-desc text-sm text-gray-600">{{ novel.description|truncatechars:50 }}</p>
                    </div>
                </div>
                {% empty %}
                <div class="no-novels bg-gray-100 rounded-lg p-8 text-center">
                    <p class="text-gray-600">暂无推荐小说</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>

    <!-- 成为作者部分 -->
    <!-- {% if user.is_authenticated and user.role == 'reader' %}
    <section class="become-author bg-gray-100 rounded-lg p-8 shadow-md">
        <div class="container mx-auto">
            <div class="author-promo text-center">
                <h2 class="text-2xl font-bold text-gray-800 mb-2">成为作者</h2>
                <p class="text-gray-600 mb-4">分享您的创作，让更多读者看到您的才华！</p>
                <a href="#" class="apply-btn bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-blue-500">申请成为作者</a>
            </div>
        </div>
    </section>
    {% endif %} -->
</div>
<style>
    /* 全局样式 */
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
    }

    /* 容器样式 */
   .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* 横幅部分样式 */
   .banner {
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('/media/background.jpg'); /* 可以替换背景图片URL */
        background-size: cover;
        background-position: center;
    }

    /* 小说卡片样式 */
   .novel-card {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;
    }

   .novel-card:hover {
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

   .overlay {
        cursor: pointer;
    }

   .icon-container {
        cursor: pointer;
    }

    /* 成为作者部分样式 */
   .become-author {
        background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
    }

    /* 链接样式 */
   .novel-cover-link,
   .novel-title-link {
        text-decoration: none;
        color: inherit;
        transition: color 0.3s ease;
    }

   .novel-cover-link:hover,
   .novel-title-link:hover {
        color: #007bff;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
       .novel-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 576px) {
       .novel-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}    